<template>
	<view class="container">
		<tui-navigation-bar :isOpacity="false" :maxOpacity="1" @init="initNavigation" :scrollTop="scrollTop" backgroundColor="#fff" color="#333"
			:title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<view class="accompany-loading">
			<uv-loading-icon :show="!loading" :size="28" timing-function="linear" mode="circle"></uv-loading-icon>
		</view>
		<view class="main" v-if="loading">
			<address-multiple :cityList="cityList" :customStyle="'height:' + addHeight" @save="selectDistrict" @saveArea="selectArea"
				:multiple="multiple"></address-multiple>
		</view>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '选择地址', //标题
				loading: false,
				cityList: [],
				district: {
					city: '',
					list: [],
					name: ''
				},
				area: {
					city: '',
					list: [],
					name: ''
				},
				from: 'index',
				multiple: 1,
				telWidth: app.globalData.widthPx,
				systemInfo: app.globalData.systemInfo,
				rpx1: 0,
			};
		},
		/**
		 * 计算属性
		 */
		computed: {
			addHeight() {
				let systemInfo = this.systemInfo //系统信息
				let safeAreaHeight = systemInfo.windowHeight //窗口高度
				let safeAreaInsets = systemInfo.safeAreaInsets.bottom //安全区
				let hhhh = safeAreaHeight - safeAreaInsets
				return 'calc(' + hhhh + 'px - 144rpx)'
			},
		},
		onLoad(options) {
			if (options) {
				this.from = options.from
				this.multiple = options.from == 'community' ? 2 : 3
			}
			this.getCityList()
			let rpx = this.telWidth / 750;
			this.rpx1 = rpx;
		},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			//获取城市列表
			getCityList() {
				return new Promise((resolve, reject) => {
					app._get(
						"/client/index/address/change", null,
						(result) => {
							let data = result.data
							data.forEach((item) => {
								this.cityList.push(item)
							})
						}, null, () => {
							uni.stopPullDownRefresh();
							this.loading = true
							resolve();
						}
					);
				});
			},
			// 省
			selectCity(item) {
				if (this.district.city != item.name) {
					this.area.city = '';
					this.area.list = [];
					this.area.name = '';
					this.district.city = item.name
					this.district.list = []
					item.childList.forEach((item) => {
						this.district.list.push(item)
					})
				}
			},
			// 市
			selectDistrict(item) {
				uni.$emit('selectAreaCommunity', {
					city: item.name,
					id: item.addressId
				})
				uni.navigateBack({
					delta: 1
				})
				return
			},
			selectArea(item) {
				let that = this
				uni.$emit('selectArea', {
					city: item.city,
					area: item.area
				})
				uni.navigateBack({
					delta: 1
				})
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #FFF;
		position: relative;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.accompany-loading {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translateX(-50%, -50%);
		}

		.main {
			box-sizing: border-box;
			padding: 176rpx 0 0;

			.current {
				width: 100%;

				&.city {
					width: 100%;
					box-sizing: border-box;
					padding: 36rpx 0 0;
				}

				.title {
					font-size: 28rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					margin-bottom: 24rpx;
				}

				.city-list {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.city-item {
						box-sizing: border-box;
						padding: 17rpx 10rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						border: 2rpx solid #E3E9E5;
						margin-bottom: 24rpx;
						// flex: 1;
						width: calc((100% - 40rpx)/4);
						white-space: nowrap;
						text-align: center;
						margin-right: 10rpx;

						&.active {
							border: 2rpx solid #282D2D;
							position: relative;

							&::before {
								content: "";
								display: block;
								width: 36rpx;
								height: 28rpx;
								background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/city-active.png');
								background-size: 100%;
								position: absolute;
								right: 0;
								bottom: 0;
							}
						}
					}
				}
			}
		}
	}
</style>